<!-- 背景为地图（暂定高德，谷歌需要国外手机号），左侧有侧边栏组件显示按钮，上方有系统消息组件，右上角有个人信息组件 -->
<template>
    <div ref="back_box">
        <Map style="width:100vw;height:100vh;" :api-key="apiKey" :center="mapCenter" :zoom="mapZoom" :markers="taskArray" />
        <Message />
        <Info />
    </div>
    <el-form>
        <div style="height: 800px;width: 250px;position: fixed;left: 20px;top: 50px;">
             <Sidebar />
        </div>
    </el-form>
</template>

<script>
import Map from "./components/BaiduMap.vue"
import Sidebar from "./components/Sidebar.vue"
import Message from "./components/Message.vue"
import Info from "./components/PlcInfo.vue"

export default {
    components: {
        Map,
        Sidebar,
        Message,
        Info,
    },
    data() {
    return {
      apiKey: 'KRTLy2aLuHV7H3CNz3GFIFoythfsb9iB',
      mapCenter: { lng: -74.002, lat: 40.424 },
      mapZoom: 11,
      taskArray: []
    }
  },
    methods: {

    }
}
</script>
    
<style scoped>

</style>